<template>
  <div class="song-list-album">
    <div class="album-slide">
      <div class="album-img">
        <img :src="attachImageUrl(tempList.picture)">
      </div>
      <div class="album-info">
        <h2>简介:</h2>
        <span>
          {{ tempList.introduction }}
        </span>
      </div>
    </div>
    <div class="album-content">
      <div class="album-title">
        <p>{{ tempList.name }}</p>
        <p></p>
<!--        <p >下载数量：{{ tempList.viewCounts }}</p>
        <p>上传时间：{{ tempList.createTime }}</p>-->
        <div class="funcs">
          <el-button type="success" size="mini" @click="downLoadPDF()">下载</el-button>
          <el-button type="success" size="mini" @click="showStaff()">乐谱展示</el-button>
        </div>
        <!--  收藏    -->
        <div class="top-left" @click="collection" v-login>
          <i class="el-icon-star-off" v-show="!isCollection"></i>
          <i class="el-icon-star-on cred" v-show="isCollection"></i>
        </div>
      </div>
      <comment :playId="staffListId" :type="0"></comment>
    </div>
  </div>
</template>

<script>
import {mixin} from "@/mixins";
import {mapGetters} from "vuex";
import AlbumContent from "../components/AlbumContent";
import Comment from "../components/Comment";
import {setCollect, isCollectOfStaff, deleteCollect, increDownloadStaffCount, getStaffById} from "@/api";
import showxml from "@/util/showxml";
import osmdToDownLoad from '../util/osmdDownloadPDF'

export default {
  name: "staff-alum",
  mixins: [mixin],
  props: [
    'playId', //乐谱或乐谱集id
    'type',   //0 乐谱，1乐谱集`
  ],
  components: {
    AlbumContent,
    Comment
  },
  data() {
    return {
      staffLists: [],//当前页面需要展示的歌曲列表
      staffListId: '',//前面传来的歌曲id
      sConsumer: this.$store.getters.sConsumer,//从浏览器里取数据，
      isCollection: false,
      collectId: ''
    }
  },
  computed: {
    ...mapGetters([
      'listOfStaffs',//当前播放列表
      'tempList',//单个乐谱集信息或乐谱的信息
      "loginIn",//用户是否登录
      "isActive",//当前乐谱是否已收藏
    ]),
  },
  created() {
    this.staffListId = this.$route.params.id;
    this.getIsCollectionInfo()
  },
  methods: {
    //提示信息
    notify(title, type) {
      this.$notify({
        title: title,
        type: type
      })
    },
    //收藏
    collection() {
      if (this.loginIn.status) {
        if (this.isCollection) { //是否已经收藏
          deleteCollect({id: this.collectId}).then(res => {
            if (res.type) {
            }
            this.isCollection = false;
            this.$message.success("取消收藏")
          }) // 取消收藏
        } else {
          this.addCollect();// 添加收藏
        }
      } else {
        this.$message.error("请先登录")
      }
    },
    //收藏列表
    getIsCollectionInfo() {
      const params = {
        consumerId: this.sConsumer.id,
        staffId: this.staffListId
      };
      // 用户是否收藏该乐谱
      isCollectOfStaff(params).then(res => {
        const data = res.data;
        this.isCollection = data ? true : false;
        if (this.isCollection) {
          this.collectId = data.id;

        }
      })
    },
    addCollect() {
      let params = {
        'consumerId': this.sConsumer.id,
        'type': 0,
        'staffId': this.tempList.id
      }
      setCollect(params).then(res => {
        console.log("staffId=" + this.tempList.id)
        if (res.code == 200 || res.code == 300) {
          this.$store.commit('setIsActive', true)
          this.isCollection = true;
          this.$message.success("收藏成功")
        } else {
          this.$message.error("收藏失败")
        }
      })
    },
    //乐谱展示
    showStaff() {
      console.log('red', this.tempList)
      showxml(this.tempList.file);
    },
    //下载
    async downLoadPDF() {
      if (this.sConsumer.id==null){
        this.notify('请先登录','warning')
      } else {
        osmdToDownLoad(this.tempList.file);
        //下载加一
        increDownloadStaffCount({
          staffId: this.tempList.id
        });
        const res = await getStaffById(this.tempList.id);
        const staff = res.data[0];
        this.$store.commit('setTempList', staff);

      }

    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/song-list-album.scss";
</style>
